<template>
  <div class="">
    <p class="title-sub">
      优惠剩余时间<span>{{hours}}</span>小时<span>{{minute}}</span>分钟
    </p>
  </div>
</template>
<script>
import timecounter from '@/components/timeCounter.vue'
export default {
  data() {
    return {
      hours: '',
      minute: ''
    }
  },
  mounted() {
    var _this = this;
    _this.timeCounter();
    var time = setInterval(function() {
      _this.timeCounter()
    }, 20000)
  },
  methods: {
    timeCounter: function() {
      var mydate = new Date();
      var beginTime = mydate.getTime();
      var year = mydate.getFullYear();
      var month = mydate.getMonth() + 1;
      var date = mydate.getDate();

      var endTime = year + '-' + month + '-' + date + ' ' + '23:59:59';
      endTime = endTime.replace(/-/g,'/');
      var endTimeMs = new Date(endTime).getTime();

      var remainTime = endTimeMs - beginTime;
      this.hours = Math.floor(remainTime / (1000 * 60 * 60));
      this.minute = Math.floor((remainTime % (1000 * 60 * 60)) / (1000 * 60));
      if (this.hours < 10) {
        this.hours = '0' + this.hours;
      }
      if (this.minute < 10) {
        this.minute = '0' + this.minute;
      }
      // this.second = parseInt(remainTime % (1000 * 60) / 1000);
      // console.log(this.hours + ' ' + this.minute + ' ' + this.second)
    }
  },
  components: {
    timecounter
  }
}

</script>
<style scoped>
.book {
  background-color: #fff;
}

.book .flag {
  position: absolute;
  top: 0;
  left: 0;
  width: .5rem;
  height: .5rem;
  font-size: 0;
}

.book .top {
  padding-top: .36rem;
}

.book .top .title-main {
  font-family: '微软雅黑';
  font-size: .36rem;
  color: #545454;
  letter-spacing: 1px;
}

.book .top .title-sub {
  margin-top: .23rem;
  font-family: '微软雅黑';
  font-size: .26rem;
  color: #8b8a8a;
  letter-spacing: 1px;
}

.book .top .title-sub span {
  margin: 0 3px;
  width: .34rem;
  height: .34rem;
  border-radius: 4px;
  background-color: rgb(255, 99, 99);
  color: #fff;
  font-family: '微软雅黑';
  font-size: .26rem;
}

</style>
